import './app.less';
import { Viewer } from './viewer';
import { AppStore } from '../store';
import { Fragment, useEffect } from 'react';
import { Footer } from './footer';
import { LeftPanel } from './left-panel';
import { RightPanel } from './right-panel';
import '@manycore/miniapp-sdk';

export function App() {
    return (
        <AppStore.Provider initialState={{}}>
            <Viewer />
            <AppComponent />
        </AppStore.Provider >
    )
}


function AppComponent() {

    const { appState: { app } } = AppStore.useContainer();

    useEffect(() => {
        const callback = () => {
            if (app) {
                app.sceneService.resize();
            }
        };
        window.addEventListener('resize', callback, false);

        return () => {
            window.removeEventListener('resize', callback, false);
        };
    }, [app]);


    if (app) {
        return (
            <Fragment>
                <LeftPanel />
                <RightPanel />
                <Footer />
            </Fragment>
        );
    }

    return null;
}
